<template>
    <div class="divBox">
      <el-row :gutter="24" class="mb20">
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">灾害类型占比</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesType"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">报灾情况</div>
                </div>
              </div>
            </div>
            <div style="height: 300px;background-color: #fff;" class="chart" id="chart1"></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb20">
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">救援任务统计</div>
                </div>
              </div>
            </div>
            <div style="height: 300px;background-color: #fff;" class="chart" id="chart2"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">野生动物保护统计</div>
                </div>
              </div>
            </div>
            <div style="height: 300px;background-color: #fff;" class="chart" id="chart3"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import {
  qetBehindPieApi,
  getDisasterMonthCountApi,
  getRescueTaskCountApi, getAnimalProtectCountApi,
} from '@/api/dashboard'
import echartsFrom from '@/components/echarts/index';
  import { checkPermi } from "@/utils/permission";
import item from "../../../layout/components/Sidebar/Item.vue"; // 权限判断函数
  export default {
    components: {echartsFrom},
    data() {
      return {
        //info: {},
        infoList: null,
        seriesType:[],
        distribution:[{
          name:'地震',
          value:3,
        },{
          name:'洪水',
          value:4,
        },{
          name:'台风',
          value:5,
        },{
          name:'其他',
          value:9,
        },],
      }
    },
    methods: {

      checkPermi,
      //灾害类型占比
      statisticsPhotoPie(){
        qetBehindPieApi().then(async res => {
          this.seriesType = res
          this.distribution = res
        })
      },
      //报灾类型分布

      // 监听页面宽度变化，刷新表格
      handleResize() {
        if (this.infoList) this.$refs.visitChart.handleResize();
      },
      initChart1(){
        let charts = this.$echarts.init(document.getElementById('chart1'));
        charts.showLoading({
          text:'加载中',
          textColor:'#000',
          maskColor:'rgba(0,0,0,0)'
        })
        let option = {
          legend:{
            textStyle:{
              color:'#000'
            },
            right:10,
            top:0
          },
          xAxis: {
            type: 'category',
            data: [],
            axisTick:{
              show:false
            },
            axisLabel: {
              textStyle: {
                color: '#000',
                fontSize: '11'
              },
              // rotate:30,
              interval: 0,
              formatter: function (value) {
                var ret = '';
                var maxLength = 3;
                var valLength = value.length;
                var rowN = Math.ceil(valLength / maxLength);
                if (rowN > 1) {
                  for (var i = 0; i < rowN; i++) {
                    var temp = '';
                    var start = i * maxLength;
                    var end = start + maxLength;
                    temp = value.substring(start, end) + '\n';
                    ret += temp;
                  }
                  return ret;
                } else {
                  return value;
                }
              }
            }
          },
          tooltip:{
            trigger:'axis',
            axisPointer:{
              type:'none'
            }
          },
          grid:{
            top:20,
            left:50,
            right:10,
            bottom:40
          },
          yAxis: {
            type: 'value',
            splitLine: {//分割线配置
              show:true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              }
            },
            axisLine:{
              show:true,
            },
            axisTick:{
              show:true,
            },
            axisLabel:{
              textStyle:{
                show:true,
                color: '#000',
                fontSize:14
              }
            },
          },
          series: []
        }
        getDisasterMonthCountApi().then((res)=>{
          option.xAxis.data = res.xdata
          res.ydata.forEach(item=>{
            option.series.push({
              data:item.count,
              type: 'line',
              name:item.name,
              smooth:true,
              showSymbol:false,
              symbol: 'circle',
            })
          })
          charts.hideLoading();
          charts.setOption(option)
        })

      },
      initChart2(){
        let charts = this.$echarts.init(document.getElementById('chart2'));
        charts.showLoading({
          text:'加载中',
          textColor:'#fff',
          maskColor:'rgba(0,0,0,0)'
        })
        let option = {
          legend:{
            textStyle:{
              color:'#000'
            },
            right:10,
            top:0
          },
          xAxis: {
            type: 'category',
            data: [],
            axisTick:{
              show:false
            },
            axisLabel: {
              textStyle: {
                color: '#000',
                fontSize: '11'
              },
              interval: 0,
              formatter: function (value) {
                var ret = '';
                var maxLength = 3;
                var valLength = value.length;
                var rowN = Math.ceil(valLength / maxLength);
                if (rowN > 1) {
                  for (var i = 0; i < rowN; i++) {
                    var temp = '';
                    var start = i * maxLength;
                    var end = start + maxLength;
                    temp = value.substring(start, end) + '\n';
                    ret += temp;
                  }
                  return ret;
                } else {
                  return value;
                }
              }
            }
          },
          tooltip:{
            trigger:'axis',
            axisPointer:{
              type:'none'
            }
          },
          grid:{
            top:20,
            left:60,
            right:10,
            bottom:40
          },
          yAxis: {
            type: 'value',
            splitLine: {//分割线配置
              show:true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              }
            },
            axisLine:{
              show:true,
            },
            axisTick:{
              show:true,
            },
            axisLabel:{
              textStyle:{
                show:true,
                color: '#000',
                fontSize:14
              }
            },
          },
          series: [
            {
              // data: getNum(7,8000,3000),
              data:[],
              name:'野生动物救援任务',
              type: 'bar',
              barWidth:17,
              itemStyle: {
                normal: {
                  label:{
                    show:true,
                    position:'top',
                    textStyle:{
                      color:'#000',
                      fontSize:14
                    }
                  },
                  barBorderRadius:[15, 15, 0, 0],
                  color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                    offset:0,
                    color:'#0db5e6'
                  },{
                    offset:1,
                    color:'#12f0b8'
                  }])
                }
              }
            },
            {
              // data: getNum(7,8000,3000),
              data:[],
              name:'灾害救援',
              type: 'bar',
              barWidth:17,
              itemStyle: {
                normal: {
                  label:{
                    show:true,
                    position:'top',
                    textStyle:{
                      color:'#000',
                      fontSize:14
                    }
                  },
                  barBorderRadius:[15, 15, 0, 0],
                  color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                    offset:0,
                    color:'#771386'
                  },{
                    offset:1,
                    color:'#750842'
                  }])
                }
              }
            }
          ]
        }
        getRescueTaskCountApi().then((res)=>{
          option.xAxis.data = res.xdata
          option.series[0].data=res.animalData;
          option.series[1].data=res.disasterData;
          charts.hideLoading();
          charts.setOption(option)
        })
      },
      initChart3(){
        let charts = this.$echarts.init(document.getElementById('chart3'));
        charts.showLoading({
          text:'加载中',
          textColor:'#fff',
          maskColor:'rgba(0,0,0,0)'
        })
        let option = {
          legend:{
            textStyle:{
              color:'#000'
            },
            right:10,
            top:0
          },
          xAxis: {
            type: 'category',
            data: [],
            axisTick:{
              show:false
            },
            axisLabel: {
              textStyle: {
                color: '#000',
                fontSize: '11'
              },
              interval: 0,
              formatter: function (value) {
                var ret = '';
                var maxLength = 3;
                var valLength = value.length;
                var rowN = Math.ceil(valLength / maxLength);
                if (rowN > 1) {
                  for (var i = 0; i < rowN; i++) {
                    var temp = '';
                    var start = i * maxLength;
                    var end = start + maxLength;
                    temp = value.substring(start, end) + '\n';
                    ret += temp;
                  }
                  return ret;
                } else {
                  return value;
                }
              }
            }
          },
          tooltip:{
            trigger:'axis',
            axisPointer:{
              type:'none'
            }
          },
          grid:{
            top:20,
            left:60,
            right:10,
            bottom:40
          },
          yAxis: {
            type: 'value',
            splitLine: {//分割线配置
              show:true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              }
            },
            axisLine:{
              show:true,
            },
            axisTick:{
              show:true,
            },
            axisLabel:{
              textStyle:{
                show:true,
                color: '#000',
                fontSize:14
              }
            },
          },
          series: [
            {
              // data: getNum(7,8000,3000),
              data:[],
              name:'野生动物救援任务',
              type: 'bar',
              barWidth:17,
              itemStyle: {
                normal: {
                  label:{
                    show:true,
                    position:'top',
                    textStyle:{
                      color:'#000',
                      fontSize:14
                    }
                  },
                  barBorderRadius:[15, 15, 0, 0],
                  color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                    offset:0,
                    color:'#0db5e6'
                  },{
                    offset:1,
                    color:'#12f0b8'
                  }])
                }
              }
            },
          ]
        }
        getAnimalProtectCountApi().then((res)=>{
        option.xAxis.data = res.xdata
        option.series[0].data=res.ydata;
        charts.hideLoading();
        charts.setOption(option)
        })
      },
    },
    mounted() {
      this.statisticsPhotoPie()
      this.initChart1()
      this.initChart2()
      this.initChart3()
    },
    created() {
      // this.chartPhotoType()
      // this.chartPhotoStatus()
      //this.chartUser()

      //this.handleChangeVisitType();
    }
  }
</script>
<style lang="scss" scoped>
  .acea-row{
    ::v-deep.el-avatar--small {
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
  .special-chat{
    width:100%;
    height:294px;
    position: relative;
    img{
      width:100%;
      height:100%;
      position: absolute;
    }

    .special-chat-box{
      width:100%;
      position: absolute;
      .line-box{
        height:calc(294px / 3);
        line-height:calc(294px / 3);
        display:flex;
        justify-content: space-around;
        .chat-line{
          font-size:18px;
          font-weight:bold;
        }
        .chat-line:nth-child(2){
          color:#fff;
          padding-left:20%;
        }
      }
    }
  }
  .header_title{
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    //padding-left:8px;
    position: relative;
    &::before{
      position: absolute;
      content: '';
      width: 0px;
      height: 18px;
      background: #1890FF;
      top:0;
      left:0;
    }
  }
  .checkTime{
    ::v-deep.el-radio__input{
      display: none;
    }
  }
  .ivu-pl-8{
    margin-left: 8px;
    font-size: 14px;
  }
  .divBox {
    padding: 0 20px !important;
  }
  .dashboard-console-visit {
    ::v-deep.el-card__header{
      padding: 14px 20px !important;
    }
    ul {
      li {
        list-style-type: none;
        margin-top: 12px;
      }
    }
  }
  .ivu-mb{
    margin-bottom: 10px;
  }
</style>
